import React, { Component } from "react";

/*
  函数传参的问题，默认情况下，如果直接在括号传参，函数是会自执行的
  1. 内联的使用this.fn.bind(this, 111)
    bind方法不仅改变this指向，还能产生新函数，bind方法产生的新函数是不会自动执行的，bind方法的第二个参数会作为新函数的第一个参数
    不推荐，因为会增加内存

  2. 内联地包裹一个箭头函数,onClick={() => this.fn(111)}
    不推荐，看似相同的函数，会指向不同的内存，也会导致内存增加
    用的最多的是这种方式

  3. 使用柯里化函数
    推荐，不会增加内存的
*/

class App extends Component {
  // fn = (n, e) => {
  //   console.log(n, e);
  // };

  // 柯里化函数
  // 一般的参数都是在外层的括号里面，只有event参数在里层的括号
  fn = (n) => (e) => {
    console.log(n, e);
  };

  render() {
    return (
      <>
        <h2>事件的参数问题</h2>

        {/* <button onClick={this.fn.bind(this, 111)}>btn1</button>
        <button onClick={this.fn.bind(this, 222)}>btn2</button> */}

        {/* <button onClick={(e) => this.fn(111, e)}>btn1</button>
        <button onClick={(e) => this.fn(222, e)}>btn2</button> */}

        <button onClick={this.fn(111)}>btn1</button>
        <button onClick={this.fn(222)}>btn2</button>
      </>
    );
  }
}

export default App;
